/*
 * @Author: Wilbur
 * @Date: 2019-09-03 13:56:10
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-09-03 14:57:20
 */

<template>
    <div class="container app-popup-list-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="fnShowAddDialog"
                size="small"
                :style="{marginRight: '32px'}"
            >
                新增弹窗
            </el-button>
        </div>
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="180"
                        label="弹窗图片">
                        <template slot-scope="scope">
                            <img
                                :src="scope.row.image_url"
                                class="table-image">
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="弹窗链接">
                        <template slot-scope="scope">
                            <a
                                :href="scope.row.image_url"
                                class="table-link"
                                :disabled="scope.row.image_url == '' ? true : false"
                                target="_blank">查看图片</a>

                            &nbsp;&nbsp;
                            <a
                                href="javascript:;"
                                :disabled="scope.row.jump_url == '' ? true : false"
                                @click="handleInitCopy(scope.row.jump_url)"
                                class="table-link copy-btn">复制链接</a>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="start_time"
                        label="开始时间">
                        <template slot-scope="scope">
                            {{ scope.row.start_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="end_time"
                        label="结束时间">
                        <template slot-scope="scope">
                            {{ scope.row.end_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="status"
                        show-overflow-tooltip
                        label="状态"
                        :width="120"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.status == 1">已上架</template>
                            <template v-if="scope.row.status == 0">已下架</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="end_time"
                        label="创建时间">
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnEditPopup(scope.row)">编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    @click="fnChangePopupStatus(scope.row)">
                                    <template v-if="scope.row.status == 1">下架</template>
                                    <template v-if="scope.row.status == 0">上架</template>
                                </el-button>
                                <el-button
                                    type="text"
                                    @click="fnDelPopup(scope.row)">删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
        <!-- 新增弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="showAddDialog"
            :before-close="handleClose">
            <el-form
                ref="mainform"
                :model="formData"
                label-position="right"
                status-icon
                :rules="formRule"
                label-width="110px"
                :disabled="false">
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="image_url"
                    label="弹窗图片:">
                    <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :http-request="e=> {fnUploadImageOfCustomerLogo(e)}"
                        :limit=1
                        :class="{hide:hideUpload}"
                        :file-list="imgList"
                    >
                        <i class="el-icon-plus"/>
                    </el-upload>
                    <p class="el-upload__tip">只能上传jpg/png文件，且不超过500kb，建议尺寸710px*280px</p>
                    <p style="display:inline-block;color:#999;margin-left:2px">*只能上传jpg/png文件</p>
                    <el-dialog
                        :visible.sync="dialogVisible">
                        <img
                            width="100%"
                            :src="formData.image_url"
                            alt=""
                        >
                    </el-dialog>
                </el-form-item>
                <el-form-item
                    label="按钮:"
                    prop="button_title"
                >
                    <el-input
                        v-model="formData.button_title"
                        class="input-width"
                        placeholder="请填写按钮名称"
                    />
                </el-form-item>
                <el-row style="display:flex">
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="跳转链接:"
                        prop="app_action"
                    >
                        <el-cascader
                            :placeholder="setJump"
                            size="small"
                            :filterable="true"
                            v-model="formData.app_action"
                            :options="linkSelectData"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"/>
                    </el-form-item>
                </el-row>
                <el-form-item
                    size="small"
                    prop="jump_url"
                    v-if="isIpt.length >= 1 ? true : false"
                >
                    <el-input
                        placeholder="请输入链接"
                        style="width: 300px"
                        v-model="formData.jump_url"
                        @input="getJump"
                        clearable
                        v-if="select[0] === 'text' ? true : false"
                    >
                        <template
                            class="param"
                            slot="prepend">{{ param[0] }}</template>
                    </el-input>
                    <el-select
                        v-model="formData.jump_url"
                        filterable
                        placeholder="请选择"
                        @change="getJump"
                        v-else
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                    <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                </el-form-item>
                <el-form-item
                    size="small"
                    prop="leap_url"
                    v-if="isIpt.length === 2 ? true : false"
                >
                    <el-input
                        placeholder="请输入链接"
                        style="width: 300px"
                        v-model="formData.leap_url"
                        @input="getLeap"
                        clearable
                        v-if="select[1] === 'text' ? true : false"
                    >
                        <template
                            class="param"
                            slot="prepend">{{ param[1] }}</template>
                    </el-input>
                    <el-select
                        v-model="formData.leap_url"
                        filterable
                        placeholder="请选择"
                        @change="getLeap"
                        v-else
                    >
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                    <p style="display:inline-block;color:#999;margin-left:12px">*需要联系技术提供</p>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="showTime"
                    label="展示时间:">
                    <el-date-picker
                        v-model="formData.showTime"
                        type="datetimerange"
                        range-separator="至"
                        size="small"
                        class="task-input"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </el-form-item>

                <div
                    class="operate-baar"
                    style="text-align: center;margin-top: 30px;">
                    <el-button
                        size="medium"
                        @click="fnReset()">取消</el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="fnSubmit()">提交</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import Clipboard from 'clipboard';
import { setTimeout } from 'timers';
export default {
    data() {
        var validateLinkUrl = (rule, val, callback) => {
            callback();
        };

        // 验证二位数组,且数组内元素不为空
        var validateArray = (rule, value, callback) => {
            if (!value) {
                callback(new Error(rule.message));
            } else {
                if (value.length < 2 || !value[0] || !value[1]) {
                    callback(new Error(rule.message));
                    return ;
                }
                callback();
            }
        };

        return {
            authResult: {},
            tableData: [],
            filterData: {
                title: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket'),
            showAddDialog: false,
            linkSelectData: [],
            param: ['url','url'],
            isIpt: [],
            link: '',
            setJump: '请选择',
            imgList: [],
            select: [],
            action: '',
            options: [],
            options2: [],
            isModule: true,
            formData: {
                image_url: '',
                app_action: '',
                jump_url: '',
                leap_url: '',
                start_time: 0,
                end_time: 0,
                showTime: [this.fnInitTimeNow(), ''],
                button_title: ''
            },
            hideUpload: false,
            dialogVisible: false,
            formRule: {
                jump_url: [
                    { required: true, message: '请输入跳转', trigger: 'blur' },
                    // { validator: validateLinkUrl, message: '请按要求填写链接', trigger: 'blur' }
                ],
                leap_url: [
                    { required: true, message: '请输入跳转', trigger: 'blur' },
                ],
                image_url: [
                    { required: true, message: '轮播图图片不能为空', trigger: 'change' }
                ],
                showTime: [
                    { required: true, message: '请填写展示时间', trigger: 'blur' },
                    { validator: validateArray, message: '请填写正确的时间', trigger: 'blur' }
                ],
                button_title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 1, max: 40, message: '活动名称长度不超过40个字符', trigger: 'blur' }
                ],
                app_action: [
                    { required: true, message: '跳转链接不能为空', trigger: 'change' }
                ]
            },
            popup_no: '',
            submitting: false
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "APP后台",
            },
            {
                title: 'APP弹窗列表'
            }
        ]);
        this.getTableData();
        this.getappAcion();
    },
    mounted() {
    },
    watch: {
        //公用一个弹窗，清除提示文案
        showAddDialog (val, oldVal) {
            if (this.$refs['mainform'] != undefined) {
                this.$refs["mainform"].resetFields();
            }
        }
    },
    methods: {
        /**
         * @description app行为数据处理
         */
        getappAcion () {
            let arr = [];

            this.$post('/student/app_action%5Cget_cascade_list', {
            }, resp => {
                if (resp.code == 1) {
                    resp.data.list.map((item,index)=>{
                        arr.push({
                            value: item.action,
                            label: item.title,
                            children: []
                        });
                        item.target_list.map((itm, idx) => {

                            arr[index].children.push({
                                value: {
                                },
                                label: itm.title,
                            });
                            arr[index].children[idx]['value'][itm.target] = JSON.stringify(itm.param_list);
                        });
                    });
                }
                this.linkSelectData = arr;
            });
        },

        /**
         * 数据处理
         */
        handleChange (status) {
            let arg = this.formData.app_action;
            let arr = [];
            let json = {};
            let newArr = [];

            this.isIpt = [];
            this.param = [];
            this.select = [];

            if (status) {
                this.formData.jump_url = this.formData.leap_url = '';
            }

            newArr.push(
                this.formData.jump_url,
                this.formData.leap_url
            );

            json['action'] = arg[0];
            for(let i in arg[1]) {
                json['target'] = i;
                json['param'] = {};
                let data = JSON.parse(arg[1][i]);

                data.map((item, index) => {
                    json['param'][item.param] = newArr[index];
                    this.isIpt.push(
                        item.param
                    );
                    this.param.push(
                        item.title
                    );
                    this.select.push(
                        item.form_type
                    );
                });
            }
            this.select.map((item,index)=>{
                let list = [];

                this.$post('/student/app_action%5Cget_param_item_list',{
                    action: json['action'],
                    target: json['target'],
                    param: this.isIpt[index]
                },resp => {
                    if (resp.code == 1 ) {
                        resp.data.list.map((itm,idx)=>{
                            list.push({
                                value: itm.value,
                                label: itm.title
                            });
                        });
                        if (index == 0) {
                            this.options = list;
                        } else if (index == 1) {
                            this.options2 = list;
                        }
                    }
                });
            });
            this.link = JSON.stringify(json);
            // console.log(this.link);
        },

        /**
         * 链接一
         */
        getJump (url) {
            this.formData.jump_url = url;
            this.handleChange(false);
        },

        /**
         * 链接二
         */
        getLeap (url) {
            this.formData.leap_url = url;
            this.handleChange(false);
        },

        /**
         * 编辑弹窗
         */
        fnEditPopup(row) {
            if (this.hideUpload) {
                this.hideUpload = !this.hideUpload;
            }
            this.isModule = true;
            this.$post('/student/popup%5Cget', {
                popup_no: row.popup_no
            }, resp => {
                if (resp.code == 1) {
                    //数据回显处理
                    let _arg = JSON.parse(resp.data['app_action']);
                    let _param = [];
                    let isIpt = [];

                    for(let i in _arg['param']) {
                        _param.push(i);
                        isIpt.push(_arg['param'][i]);
                    }
                    this.param = _param;
                    this.isIpt = isIpt;
                    this.imgList.push({
                        url: resp.data.image_url
                    });

                    this.fnSetJump(_arg, resp);
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
            this.showAddDialog = true;
            this.popup_no = row.popup_no;
        },

        /**
         * 数据回显
         */
        fnSetJump (no, resp) {
            this.setJump = '';
            let name = [];
            let str = '';
            let action = [];
            let json = {};

            for(let i in no){
                name.push(no[i]);
            }

            json[name[1]] = '';
            this.linkSelectData.map((item, index) => {
                if(item.value == name[0]) {
                    str += item.label + '/';
                    action.push(item.value);
                    item.children.map((itm,idx)=>{
                        for(let i in itm['value']) {
                            if (name[1] == i) {
                                str += itm.label;
                                json[name[1]] = itm['value'][i];
                                action.push(json);
                            }
                        }
                    });
                }
            });
            this.setJump = str;


            for(let key in json) {
                if(json[key] == '[]') {
                    this.isIpt = [];
                } else {
                    let type = JSON.parse(json[key]);

                    // console.log(type.length, type[0].form_type);
                    if(type.length == 1 && type[0].form_type == 'text') {
                        this.select = ['text'];
                    } else if (type.length == 1 && type[0].form_type == 'select') {
                        this.select = ['select'];
                    } else if (type.length == 2) {
                        this.select = ['select'];
                    }
                }
            }

            setTimeout(()=>{
                this.formData = {
                    button_title: resp.data.button_title,
                    showTime: [new Date(resp.data.start_time * 1000), new Date(resp.data.end_time * 1000)],
                    app_action: action,
                    image_url: resp.data.image_url,
                    jump_url: resp.data.jump_url,
                    leap_url : this.isIpt.length == 1 ? '' : this.isIpt[this.isIpt.length - 1]
                };

                // console.log(this.formData, 'formData');
                this.getappAcion();
            },100);
        },

        /**
         * 上传图片
         */
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        fnUploadImageOfCustomerLogo(e) {
            this.fnUploadImage(e, (resp) => {
                this.hideUpload = !this.hideUpload;
                this.formData.image_url = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        /**
         * 取消
         */
        fnReset(){
            this.showAddDialog = false;
            this.imgList = [];
            this.formData.image_url = '';
            this.formData.jump_url = '';
            this.formData.app_action = '';
            this.formData.start_time = '';
            this.formData.end_time = '';
            this.formData.button_title = '';
            this.$set(this.formData, 'showTime', [this.fnInitTimeNow(), '']);
        },

        /**
         * 提交
         */
        fnSubmit(){
            if(this.submitting){
                return ;
            }
            this.$refs.mainform.validate(valid => {
                if(valid){
                    this.submitting = true;
                    this.imgList = [];

                    let data = {
                        image_url: this.formData.image_url,
                        jump_url: this.formData.jump_url,
                        start_time: Date.parse(this.formData.showTime[0])/1000,
                        end_time : Date.parse(this.formData.showTime[1])/1000,
                        button_title: this.formData.button_title,
                        app_action: this.link
                    };

                    if(this.isModule){
                        data.popup_no = this.popup_no;

                        this.$post('/student/popup%5Cset', data, resp => {
                            if(resp.code == 1){
                                this.$message({
                                    type: 'success',
                                    center: true,
                                    message: '修改成功'
                                });
                                // this.$router.push({
                                //     name: 'AppBannerList'
                                // });
                                this.showAddDialog = false;
                                this.getTableData(1);
                            }else{
                                this.$message({
                                    type: 'warning',
                                    center: true,
                                    message: resp.msg
                                });
                            }
                            this.submitting = false;
                        });
                    }else{
                        this.$post('/student/popup%5Cadd', data, resp => {
                            if(resp.code == 1){
                                this.popup_no = resp.data.popup_no;
                                this.$message({
                                    type: 'success',
                                    center: true,
                                    message: '提交成功，如果想要生效，请修改为上架状态'
                                });
                                this.fnReset();
                                this.showAddDialog = false;
                                this.getTableData(1);
                            }else{
                                this.$message({
                                    type: 'warning',
                                    center: true,
                                    message: resp.msg
                                });
                            }
                            this.submitting = false;
                        });
                    }

                }
            });
        },
        fnInitTimeNow() {
            var timestamp=new Date().getTime();

            return timestamp;
        },
        handleClose(done) {
            this.imgList = [];
            done();
        },

        /**
         *新增
         */
        fnShowAddDialog() {
            this.imgList = [];
            this.formData.image_url = '';
            this.formData.jump_url = '';
            this.formData.leap_url = '';
            this.formData.start_time = '';
            this.formData.end_time = '';
            this.formData.button_title = '';
            this.formData.app_action = '';
            this.$set(this.formData, 'showTime', [this.fnInitTimeNow(), '']);
            this.showAddDialog = true;
            this.isModule = false;
            this.setJump = '请选择';
            this.isIpt = this.formData.app_action = [];
            if (this.hideUpload) {
                this.hideUpload = !this.hideUpload;
            }
        },
        fnDelPopup(row) {
            this.$confirm('删除该轮播图, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/popup%5Cdelete', {
                    popup_no: row.popup_no
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData(this.page.now_page);
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        fnChangePopupStatus(row) {
            this.$post('/student/popup%5Cset_status', {
                popup_no: row.popup_no,
                status: row.status == 1 ? 0 : 1
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData(this.page.now_page);
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
            });
        },
        /**
         * 复制链接
         */
        handleInitCopy(link) {
            if(link) {
                let str = link;
                let oInput = document.createElement("input");

                oInput.value = str;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.style.display = "none";
                this.$message.success('复制成功');
            } else {
                this.$message.warning('链接不可以为空');
            }
            // var clipboard = new Clipboard('.copy-btn', {
            //     text: function () {
            //         return link;
            //     }
            // });

            // clipboard.on('success', e => {
            //     this.$message({
            //         type: 'success',
            //         message: '复制成功'
            //     });
            //     e.clearSelection();
            // });

            // clipboard.on('error', e => {
            //     this.$message({
            //         type: 'warning',
            //         message: '未复制成功，请手动复制'
            //     });
            // });
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/student/popup%5Cget_list', {
                page_id: page || this.page.now_page,
                style_type: 0
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
         * 删除图片
         */
        handleRemove(file, fileList) {
            this.formData.image_url = '';
            this.hideUpload = false;
        },

        /**
         * 放大图片
         */
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 0px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 12px 0;
    overflow: hidden;
    margin-top: 0px;
    box-sizing: border-box;
    padding: 0 32px;
    background-color: #fff;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
    .table-image{
        width: 150px;
    }
    .table-link{
        color: #409EFF;
    }
    .el-button {
        padding: 0;
    }
    .icon-bianji{
        font-size: 14px;
        color: #B9B9B9;
        cursor: pointer;
    }
    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
    .submit-config-item {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        font-size: 14px;

        & + .submit-config-item {
            padding-left: 10px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 1px;
                height: 14px;
                transform: translate(0, -50%);
                background-color: #d8d8d8;
            }
        }

        .num {
            vertical-align: middle;
        }
        .iconfont {
            font-size: 16px;
            color: #b9b9b9;
            vertical-align: middle;
        }

        .icon-tupian {
            font-size: 20px;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.dialog-link{
    & + .dialog-link{
        margin-top: 20px;
    }
    .link-label{
        font-weight: 500;
        margin-right: 20px;
    }
    .link-value{
    }
}
</style>
<style lang="less">
.el-cascader .el-input .el-input__inner::-webkit-input-placeholder {
    color: #606266;
}
.el-dialog__body .el-form .el-form-item__content .input-width {
    width: 80%;
}
.app-popup-list-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }
    .el-table th {
        background: rgba(242, 242, 242, 1)!important;
    }
}
.task-list-preview-popover {
    min-width: auto!important;
    width: 120px!important;
    height: 120px;
    padding: 8px!important;
}
.sort-dialog{
    width: 270px!important;
}
.hide .el-upload--picture-card {
  display: none;
}
</style>
